//获取导航按钮
	let navs = document.querySelectorAll('.nav_child')
// 获取内容盒子
	let boxchild = document.querySelectorAll('.box_child')
//导航按钮加点击事件
	for(let i=0;i<navs.length;i++){
		//加点击事件
		navs[i].onclick = function(){
			//调取修改状态函数，传入下标
			navclick(i)
			//调取显示当前内容盒子
			boxshow(i)
		}
	}
//初始化导航状态
	navclick(0)
//给点击的导航加上状态，需要传入下标
	function navclick(index){
		//循环清除其他按钮状态
		for(let i=0;i<navs.length;i++){
			//取消状态
			navs[i].style.color = ''
		}
		//给当前点击的按钮加上状态
		navs[index].style.color = 'red'
	}
//初始显示
 	boxshow(0)
//当前显示的内容盒子
	function boxshow(index){
		//循环隐藏盒子
		for(let i=0;i<boxchild.length;i++){
			//取消状态
			boxchild[i].style.display = ''
		}
		//显示当前盒子
		boxchild[index].style.display = 'block'
	}

//获取热搜
	ajax({
		url:'https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg?g_tk=5381&uin=0&format=jsonp&jsonpCallback=callback1&inCharset=utf-8&outCharset=utf-8&notice=0&platform=h5&needNewCode=1&_=1513317614040',
		type:'get',
		datatype:'jsonp',
		callback:'callback1',
		success(data){
			let arr = data.data.hotkey
			let str = ''
			for(let i=0;i<arr.length;i++){
				str+=`
					<span onclick="locksoso('${arr[i].k}')">${arr[i].k}</span>
				`
			}
			splcloud.innerHTML = str
		}
	})

//搜索框回车事件搜索歌曲
	values.onkeyup = function(event){
		var ev = event||ev
		if(ev.key == 'Enter'){
			if(values.value == ''){
				alert('请输入内容')
			}else{
				//调取搜索
				locksoso(values.value)
			}
		}
	}
//跳转到搜索结果列表，搜索歌曲
//需要传入歌曲名字
	function locksoso(songname){
		//切换导航状态
			navclick(1)
		//切换内容状态
			boxshow(1)
		//请求歌曲数据
			ajax({
				url:'https://c.y.qq.com/soso/fcgi-bin/client_search_cp?g_tk=5381&p=1&n=20&w='+songname+'&format=jsonp&jsonpCallback=callback2&loginUin=0&hostUin=0&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0&remoteplace=txt.yqq.song&t=0&aggr=1&cr=1&catZhida=1&flag_qc=0',
				type:'get',
				datatype:'jsonp',
				callback:'callback2',
				success(data){
					let arr = data.data.song.list
					let str = ''
					for(let i=0;i<arr.length;i++){
						str+=`
							 <div class="songlist">
							 	<div class="childsong">
							 	<span  onclick="locksoso('${arr[i].songname}')" title="点击可以搜索歌曲">${arr[i].songname_hilight}</span>							
							 	<span onclick="locksoso('${arr[i].singer[0].name}')" title="点击可以搜索歌手">${arr[i].singer[0].name_hilight}</span>
							 	</div>
							 	<div class="childsong">
							 		<button onclick="playarrpush('${arr[i].songname}','${arr[i].singer[0].name}','${arr[i].songmid}')">加入播放</button>
							 	</div>
							 	<div class="childsong">
							 		<button onclick="playshow('${arr[i].songname}','${arr[i].singer[0].name}','${arr[i].songmid}')">播放</button>
							 	</div>
							 </div>
						`
					}
					songlist.innerHTML = str
//					console.log(arr)
				}
			})
	}
	
//  播放列表数组
	const playarr = []
//  添加到播放列表函数
	function playarrpush(songname,singer,songmid){
		//songname = 歌曲数据
		//singer = 歌手
		//songmid = 歌曲id
		//判断歌曲是否存在开关
		 let songtype = true
		//循环判断播放列表中有没有要加入的歌曲
		 for(let i=0;i<playarr.length;i++){
		 	if(playarr[i].songmid == songmid){
		 		//数组中已经有了歌曲，改变开关
		 		songtype = false
		 	}
		 }
		 if(songtype){
		 	//把歌曲添加到歌曲播放数组
			playarr.push({songname,singer,songmid})
			//渲染出播放列表  songplay
			playview()
		 }
		 //切换到播放列表状态
			//切换导航状态
				navclick(2)
			//切换内容状态
				boxshow(2)
	}

//移除播放
	function removesong(index){
		//删除数据
		playarr.splice(index,1)
		//重新渲染视图
		playview()
//		console.log(index)
	}
//歌曲播放列表视图渲染
    function playview(){
    	var str = ''
    		//判断你当前播放列表有没有数据
			if(playarr.length == 0){
				str=`
					<div style="line-height: 100px;text-align: center;">
							播放列表暂时没有数据
					</div>
				`
			}else{
				for(let i=0;i<playarr.length;i++){
				str+=`
				     <div class="songlist">
							 	<div class="childsong">
							 	<span  onclick="locksoso('${playarr[i].songname}')" title="点击可以搜索歌曲">${playarr[i].songname}</span>							
							 	<span onclick="locksoso('${playarr[i].singer}')" title="点击可以搜索歌手">${playarr[i].singer}</span>
							 	</div>
							 	<div class="childsong">
							 		<button onclick="removesong(${i})">移除播放</button>
							 	</div>
							 	<div class="childsong">
							 		<button onclick="playshow('${playarr[i].songname}','${playarr[i].singer}','${playarr[i].songmid}')">播放</button>
							 	</div>
							 </div>
				`
			}
			}
			songplay.innerHTML = str
    }

//歌曲播放
  function playshow(songname,singer,songmid){
  	//添加播放列表
  	  playarrpush(songname,singer,songmid)
  	//ajax请求播放路径
  	  ajax({
  	  	url:'http://api.cimns.com:8081/song/detail',
  	  	type:'get',
  	  	data:{
  	  		mid:songmid
  	  	},
  	  	success(data){
  	  			let purl = data.purl //文件路径
  	  			console.log(purl)
  	  			let arr = data.sip // 网址数组
  	  			let str = ''
  	  			//循环出歌曲替换项
  	  			for(let i=0;i<arr.length;i++){
  	  				str+=`
  	  					<source src="${arr[i]+purl}" >
  	  				`
  	  			}
  	  			let audios = `
  	  			<audio autoplay controls>
					${str}
				</audio>
  	  			`
  	  			audioplay.innerHTML  = audios
  	  	}
  	  })
  	  
  }








